<template>
  <el-dialog title="设置" :visible="showDialog" @close="$emit('update:showDialog', false)">
    <div style="padding: 0 40px;">

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="出勤设置" name="1">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-row type="flex">
                <div style="margin: 10px 10px 0 28px;  font-weight: 700;">部门：</div>
                <!-- 选择器 -->
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-row>
            </el-form-item>

            <el-form-item>
              <div class="time">
                <el-row type="flex">
                  <div style="margin-right: 10px;  font-weight: 700;">出勤时间：</div>
                  <div>
                    <el-row style="margin-bottom: 10px;" type="flex">
                      <!-- 时间选择器 -->
                      <!-- 上午 -->
                      <el-time-select
                        v-model="morningStartTime"
                        placeholder="08:45:00"
                        :picker-options="{
                          start: '00:00',
                          step: '00:05',
                          end: '23:55'
                        }"
                      />
                      <div class="decollator">-</div>
                      <el-time-select
                        v-model="morningEndTime"
                        placeholder="12:00:00"
                        :picker-options="{
                          start: '08:30',
                          step: '00:05',
                          end: '18:30',
                          minTime: startTime
                        }"
                      />
                    </el-row>
                    <!-- 下午 -->
                    <el-row type="flex">
                      <el-time-select
                        v-model="afternoonStartTime"
                        placeholder="13:30:00"
                        :picker-options="{
                          start: '00:00',
                          step: '00:05',
                          end: '23:55'
                        }"
                      />
                      <div class="decollator">-</div>
                      <el-time-select
                        v-model="afternoonEndTime"
                        placeholder="17:45:00"
                        :picker-options="{
                          start: '08:30',
                          step: '00:05',
                          end: '18:30',
                          minTime: startTime
                        }"
                      />
                    </el-row>
                  </div>

                </el-row>
              </div>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane label="请假设置" name="2">请假设置</el-tab-pane>
        <el-tab-pane label="扣款设置" name="3">扣款设置</el-tab-pane>
        <el-tab-pane label="加班设置" name="4">加班设置</el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: Boolean
  },
  data() {
    return {
      activeName: '1',
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      morningStartTime: '',
      morningEndTime: '',
      afternoonStartTime: '',
      afternoonEndTime: '',
      form: {}
    }
  },
  mounted() {
    this.value = this.options[0].value
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }

}
</script>

<style lang="scss" scoped>

  .decollator{
      margin: 0 2px;
    }
</style>
